<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>象棋对战平台</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="icon" type="image/png" href="./img/favicon.png">
    <link href="./css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="./css/chess.css" type="text/css" rel="stylesheet">
    <link href="css/home-icon.css" type="text/css" rel="stylesheet"/>
    <link href="css/Toast.css" type="text/css" rel="stylesheet">


</head>
<body>
<!--渲染 游戏成功 的提示-->
<!-- 模态框代码 -->
<div class="header">
    <a href="/" >
        <img src="./img/icons8-home.png"  class="home-icon" alt="返回首页" >
    </a>
</div>
<div class="modal fade" id="gameResultModal" tabindex="-1" role="dialog" aria-labelledby="gameResultModalLabel"
     aria-hidden="true" data-backdrop="static" data-keyboard="false">


    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title alert-heading" id="gameResultModalLabel">游戏成功！</h4>
            </div>
            <div class="modal-body">
                <p id="winnerMessage"></p>
                <hr>
                <p class="mb-0">请点击下方按钮，开始新的一局对战。</p>
            </div>
            <div class="modal-footer">
                <button type="button" id="newRoundBattle" class="btn btn-primary">开始新的一局对战</button>
            </div>
        </div>
    </div>
</div>

<div class="container d-flex justify-content-center align-items-center vh-100">
    <div class="chessboard" id="chessboard">
        <!-- 棋盘和棋子将在这里渲染 -->
    </div>
</div>

<!-- Toast 提示 -->
<div class="toast-container">
    <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">提示</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body"></div>
    </div>
</div>

</body>
<script src="./js/bootstrap.bundle.min.js"></script>
<script src="js/Xiangqi/DataRendering.js" type="module"></script>



</html>